<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{base}">

<head>
    <title>Countries</title>
</head>

<div layout:fragment="page_content" id="page_content">
    <h1 class="page-header">Countries</h1>
    <div class="row justify-content-md-center">
        <div class="col-md-6 input-group">
            <input type="text" class="filter form-control" id="search_f"
                   th:value="${param.search}" name="search" placeholder="Search by name"/>
            <button id="searchBtn" class="btn btn-primary btn-sm">
                <i class="fa fa-search"></i> Search
            </button>
        </div>
    </div>
    <br/>
    <div class="row">
        <div class="col">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Continent</th>
                    <th>Region</th>
                </tr>
                <tr>
                    <th>
                        <select class="form-control filter" id="continents_f" name="continent">

                            <option value="">All</option>
                            <option th:each="c : ${continents}" th:value="${c}"
                                    th:selected="${#strings.equals(c, param.continent)}">[[${c}]]
                            </option>
                        </select>
                    </th>
                    <th>

                        <select class="form-control filter" id="regions_f" name="region">
                            <option value="">All</option>
                            <option th:each="r : ${regions}" th:value="${r}"
                                    th:selected="${#strings.equals(r, param.region)}">[[${r}]]
                            </option>
                        </select>
                    </th>
                </tr>
                </thead>
            </table>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Continent</th>
                    <th>Region</th>
                    <th>Area</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="c : ${countries}">
                    <td><a th:href="@{|/countries/${c.code}|}">[[${c.code}]]</a></td>
                    <td>[[${c.name}]]</td>
                    <td>[[${c.continent}]]</td>
                    <td>[[${c.region}]]</td>
                    <td>[[${c.surfaceArea}]]</td>
                </tr>
                </tbody>
            </table>
            <div>
                <span id="pagination" th:attr="count=${count}"></span>
            </div>

        </div>
    </div>
</div>
<th:block layout:fragment="scripts">
    <script th:src="@{/js/countries.js}"></script>
</th:block>
</html>